<template>
  <!--  状态皮肤切换  soso fine difference -->
  <div class="report soso" :class="setBackgroundColor" v-show="studentStatus !==0">
    <div class="report-top"  :class="getInsuranceList.length?'':'no-statistics-content'">
      <header class="color-fff">
        <button class="week fs30px" :class="{current: reportType === 1}" @click="stateTab(1)">周</button>
        <button class="month fs30px" :class="{current: reportType === 2}" @click="stateTab(2)">月</button>
      </header>
      <div class="state-text">
        <time class="fs30px color-fff">{{reportDetailData.dayString}}</time>
        <h6 class="color-fff">
          {{textShowType.title}}
        </h6>
        <p class="fs30px color-fff" v-html="textShowType.text">
        </p>
      </div>
      <h4 class="fs40px color-fff text-center" v-if="getInsuranceList.length">&nbsp;参保有效学习天数</h4>
    </div>
    <div class="statistics-content">
      <!-- empty-item-data -->
      <ul class="statistics-list relative" :class="getInsuranceList.length?'':'empty-item-data'" v-if="getInsuranceList.length">
        <li v-for="(item, index) in getInsuranceList" :key="index">
          <h6 class="item-title absolute color-ff6e1d fs30px dwote2">
            {{item.goodName}}
          </h6>
          <div class="item-content">
            <div class="color-describe fs24px">
              <p><span class="color-highlight fs50px">{{item.totalDays}}</span>天</p>
              <small>保险要求天数</small>
            </div>
            <div class="color-describe fs24px">
              <p><span class="color-highlight fs50px">{{item.watchDay}}</span>天</p>
              <small>已达标天数</small>
            </div>
            <div class="color-describe fs24px">
              <!--<p><span class="color-highlight fs50px">100</span>%</p>-->
              <p><span class="color-highlight fs50px">{{item.insurancePerString}}</span></p>
              <small>投保完成率</small>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="learning-data">
      <div class="learning-data-title relative">
        <h6 class="absolute text-center fs40px color-fff">学习数据</h6>
      </div>
      <div class="learning-data-bg">
        <div class="subject-num text-center relative">
          <!-- 学习天数 数量 -->
          <p>
            <span class="color-highlight">{{reportDetailData.learningDays}}</span>
            天
            <br>
            学习天数
          </p>
          <p>
            <span class="color-highlight">{{reportDetailData.learningCourseCount}}</span>
            个
            <br>
            科目数量
          </p>
        </div>
        <div class="total-time ">
          <!-- 学习总时长  -->
          <div class="total-time-title text-center">
            <h6 class="fs40px color-fff text-center">学习总时长</h6>
            <!-- total-empty-data -->
            <p class="text-center fs28px relative" :class="getTimeList.length?'':' total-empty-data'">{{reportDetailData.lastWeekWatchDurationString}}</p>
          </div>
          <div class="total-time-table" v-if="getTimeList.length">
            <div class="item-table-title text-center">
              <span class="course-name">课程名称</span>
              <span>学习总时长</span>
            </div>
            <div class="item-table-title text-center" v-for="(item, index) in getTimeList" :key="index">
              <span class="course-name">{{item.courseName}}</span>
              <span>{{item.singleWatchDurationString}}</span>
            </div>
          </div>
        </div>
        <div class="total-time situation">
          <!-- 听课完成情况  -->
          <div class="total-time-title text-center">
            <h6 class="fs40px color-fff text-center">听课完成情况</h6>
            <!-- lectures-empty-data -->
            <p class="text-center fs28px relative" :class="getCompleteList.length?'':'lectures-empty-data'">整体出勤率为{{reportDetailData.completePerString}}</p>
          </div>
          <div class="total-time-table" v-if="getCompleteList.length">
            <div class="item-table-title text-center">
              <span class="course-name">课程名称</span>
              <span>学习进度</span>
            </div>
            <div class="item-table-title text-center" v-for="(item, index) in getCompleteList" :key="index">
              <span class="course-name">{{item.courseName}}</span>
              <span>{{item.singleCompletePerString}}</span>
            </div>
          </div>
        </div>
        <div class="total-time situation">
          <!-- 做题情况  -->
          <div class="total-time-title text-center">
            <h6 class="fs40px color-fff text-center">做题情况</h6>
            <!-- subject-empty-data -->
            <p class="text-center fs28px relative" :class="wokeRateDataList.length?'':'subject-empty-data'">累计做题{{wokeRateData.num}}题 | 平均作业达标率为{{wokeRateData.rate|| 0 }}</p>
          </div>
          <div class="total-time-table user-subject-num">
            <table class="user-subject-table"  cellpadding="0" cellspacing="0" v-if="wokeRateDataList.length">
              <tr>
                <th>科目</th>
                <th>计划 <br> 做题量</th>
                <th>做题<br>数量</th>
                <th>正确 <br>数量</th>
                <th>正确 <br>率</th>
                <th>作业 <br>达标率</th>
              </tr>
              <tr  v-for="(item, index) in wokeRateDataList" :key="index">
                <td>{{item.cname}}</td>
                <td>{{item.num}}</td>
                <td>{{item.makenum}}</td>
                <td>{{item.rightnum}}</td>
                <td>{{item.trueRate}}</td>
                <td>{{item.standardizeRate}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="contrast text-center relative color-describe" v-if="!$hqTool.isUndefined(wokeRateData.increment)">
          <!--  对比 -->
          <p>
            上{{reportType==1?'周':'月'}}做题量
            <!--<br>-->
            <!--对比增加-->
            <!--<br>-->
            <span class="color-highlight">
              {{wokeRateData.increment}}
            </span>题
          </p>
        </div>
      </div>
    </div>
    <div class="share-content text-center" v-if="isApp">
      <p class="fs28px color-fff">以上是上{{reportType==1?'周':'个月'}}的学习报告，赶紧与同学分享吧！</p>
      <button class="fs36px color-highlight bold" @click="share">分享给朋友</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isApp: true,
      shareMeg: {
        // 默认使用优秀分享文案
        type: 0,
        title: '学习是我唯一的动力，来~看我一周的战绩',
        description: '成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成',
        ImgUrl: 'http://download.hqjy.com/img/App_logo_kuaiji.png',
        shareUrl: window.location.href
      },
      // 1:周  2:月
      reportType: 1,
      urlParams: {
        pushDay: this.$hqTool.getUrlKey('pushDay'),
        userId: this.$hqTool.getUrlKey('userId')
      },
      reportDetailData: {},
      wokeRateData: {},
      textShowTypeArr: [
        {
          title: '优秀',
          text: '本期学习很不错，<br>继续保持哦~'
        },
        {
          title: '还行',
          text: '本期学习量不够哦，<br>需继续努力，加油~'
        },
        {
          title: '需努力',
          text: '本期学习欠佳，<br>需多看课程，<br>多做题哦~'
        }
      ],
      // 学生状态 1 差 2 一般 3 优秀
      studentStatus: 0
    }
  },
  computed: {
    getInsuranceList () {
      const arr = this.reportDetailData.insuranceList
      if (!this.$hqTool.isArray(arr) || !arr.length) return []
      return arr
    },
    getTimeList () {
      const timeList = this.reportDetailData.courseLearningTimeList
      if (!this.$hqTool.isArray(timeList) || !timeList.length) return []
      return timeList
    },
    getCompleteList () {
      const arr = this.reportDetailData.courseCompleteList
      if (!this.$hqTool.isArray(arr) || !arr.length) return []
      return arr
    },
    textShowType () {
      /* eslint-disable */
      const completePerString = this.reportDetailData.completePerString
      const rate = this.wokeRateData.rate
      const reg = /%/g
      if (this.$hqTool.emptyObject(this.wokeRateData)){
        this.studentStatus = 0
        return {}
      }
      const regCompletePerStringStr = completePerString.replace(reg, '') - 0
      const regRateStr = rate.replace(reg, '') - 0
      const a = (regCompletePerStringStr + regRateStr) / 2
      let obj = {}
      let str = this.reportType==1? '周':'月'
      if (a >= 80) {
        // 优秀
        this.studentStatus = 3
        obj = this.textShowTypeArr[0]
      } else if (a < 49) {
        // 差
        this.studentStatus = 1
        obj = this.textShowTypeArr[2]
        this.shareMeg.title = '虽然上'+ str +'没有好好学习，但我会继续努力的'
        this.shareMeg.description = '不要太安逸而过早放弃。在没有人看到的地方去努力，坚持早起、坚持学习、坚持运动，努力遇见更好的自己'
      } else {
        // 一般
        this.studentStatus = 2
        obj = this.textShowTypeArr[1]
        this.shareMeg.title = '看看我一'+ str +'努力下来的成果~'
        this.shareMeg.description = '只有不断的学习，才能看到遥远的未来，我们一起加油吧'
      }
      console.log(this.studentStatus, ' this.studentStatus  this.studentStatus  this.studentStatus ')
      this.configShareMsg()
      return obj
    },
    wokeRateDataList () {
      const arr = this.wokeRateData.data
      if (!this.$hqTool.isArray(arr) || !arr.length) return []
      return arr
    },
    setBackgroundColor () {
      let className = ''
      switch (this.studentStatus) {
        case 1:
          className = 'difference'
          break
        case 2:
          className = 'soso'
          break
        case 3:
          className = 'fine'
          break
      }
      return className
    }
  },
  components: {
  },
  created () {
    this.getReportDetail()
  },
  mounted () {
  },
  methods: {
    configShareMsg () {
      const isWebView = this.$appTool.setShareConfig(this.shareMeg)
      this.isApp = isWebView
    },
    getReportDetail () {
      const submitData = {
        pushDay: this.urlParams.pushDay,
        reportType: this.reportType,
        userId: this.urlParams.userId
      }
      this.$api.reportDetail(submitData).then(res => {
        if (!res) {
          this.reportDetailData = {}
          this.$hqTool.isEmptyData({
            text: '暂无报表数据',
            status: true
          })
          return
        }
        this.reportDetailData = res.data
        this.getWokeRateData()
      }).catch(err => {
        this.$hqTool.isEmptyData({
          text: '暂无报表数据',
          status: true
        })
        console.log(err)
      })
    },
    getWokeRateData () {
      const getCompleteList = this.getCompleteList
      let courseCodesArr = []
      let phaseIdsArr = []
      for (let i = 0; i < getCompleteList.length; i++) {
        const item = getCompleteList[i]
        courseCodesArr.push(item.courseCode)
        phaseIdsArr.push(item.phaseIds)
      }
      const submitData = {
        userNcId: this.urlParams.userId,
        courseCodes: courseCodesArr.join(','),
        endDate: this.urlParams.pushDay,
        phaseIds: phaseIdsArr.join(','),
        type: this.reportType
      }
      // test data
      // submitData.userNcId = 14524512
      // submitData.userNcId = 12957865
      // submitData.courseCodes = 'kckm804'
      // submitData.endDate = '2019-07-17'
      // submitData.phaseIds = '555/556'
      this.$api.getWokeRate(submitData).then(res => {
        if (!res || res.bizCode !== 1 || !this.$hqTool.isArray(res.data)) {
          this.wokeRateData = {}
          let msg = '暂无数据'
          return this.$hqTool.isEmptyData({
            text: msg,
            status: true
          })
        }
        this.wokeRateData = res
        console.log(this.wokeRateData, 'this.wokeRateData ')
      })
    },
    stateTab (num) {
      this.reportType = num
      this.getReportDetail()
    },
    share () {
      if (!this.$appTool.showShareDialog(this.shareMeg)) {
        this.$hqTool.toast({
          type: 'fail',
          msg: '当前设备不支持分享'
        })
      }
    }
  }
}
</script>
<style scoped lang="less">
.report{
  .report-top{
    padding-top: 80px;
    height: 736px;
    &.no-statistics-content{
      height: 590px;
      background-size: 100% 126%;
    }
    header{
      width: 450px;
      height: 60px;
      border-radius: 10px;
      border: 2px solid #fff;
      margin: 0 auto;
      font-size: 0;
      button{
        width: 50%;
        height: 100%;
        background: transparent;
      }
      .week.current{
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        background: #fff;
      }
      .month.current{
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        background: #fff;
      }
    }
    .state-text{
      padding: 80px 0 0 72px;
      height: 480px;
      time{
        padding: 8px 30px;
        display: inline-block;
      }
      h6{
        font-size: 100px;
      }
    }
    h4{
      height: 120px;
      line-height: 120px;
    }
  }

  .statistics-content{
    .statistics-list{
      margin-bottom: 128px;
      li{
        height: 260px;
        position: relative;
        padding-top: 94px;
        h6{
          max-width: 84%;
          max-height: 60px;
          left: 42px;
          top: 42px;
          padding: 8px 30px 8px 30px;
        }
        .item-content{
          width: 670px;
          margin: 0 auto;
          display: flex;
          height: 164px;
          align-items: center;
          div{
            flex: 1;
            text-align: center;
            overflow: hidden;
            p{
              width: 100%;
            }
            small{
              width: 100%;
              display: block;
            }
          }
        }
      }
      li:last-child::before{
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom:-128px;
        width: 100%;
        height: 128px;
      }
    }
  }
  .learning-data{
    position: relative;
    top: 0;
    .learning-data-title{
      height: 220px;
      h6{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        line-height:120px;
      }
    }
    .learning-data-bg{
      overflow: hidden;
      padding:40px 0 120px;
      .subject-num{
        height: 240px;
        display: flex;
        align-items: center;
        p{
          flex: 1;
          span{
            font-size: 100px;
            line-height: 100px;
          }
        }
      }
      .subject-num::before{
        content: '';
        display: block;
        position: absolute;
        left:50%;
        bottom:-40px;
        width: 90%;
        height: 4px;
        margin-left: -45%;
        border-bottom: 2px dashed  #ffef3a;
      }
      .total-time{
        padding-top: 100px;
        .total-time-title{
          p{
            display: inline-block;
            padding:  6px 34px;
            border-radius: 8px;
          }
          .total-empty-data,
          .lectures-empty-data,
          .subject-empty-data{
            margin-bottom: 60px;
            &::before{
              display: block;
              width: 360%;
              height: 60px;
              line-height: 60px;
              position: absolute;
              left: 50%;
              top: 60px;
              margin-left: -180%;
              font-size: 28px;
            }
          }
        }
        .total-time-table{
          padding-top:20px;
          .item-table-title{
            width: 680px;
            /*height: 64px;*/
            background: #fffef4;
            border-radius: 4px;
            margin: 0 auto;
            display: flex;
            /*line-height: 64px;*/
            justify-content: center;
            align-items: center;
            span{
              flex: 1;
              height: 100%;
              line-height: 36px;
              padding:6px;
            }
            &:first-child{
              background: rgba(255,255,255,0.7);
            }
          }
          .user-subject-table{
            background: rgba(255,255,255,0.7);
          }
        }
        .user-subject-num{
          .user-subject-title{
            .course-name{
              line-height: 80px;
            }
          }
          .user-subject-table{
            width: 680px;
            border-collapse:collapse;
            /*border:1px solid black;*/
            margin: 0 auto;
            /*background: #fff;*/
            table-layout:fixed
          }
          th{
            word-wrap:break-word;
            font-weight: normal;
            padding: 4px;
          }
          td
          {
            /*border:1px solid black;*/
            text-align: center;
            word-wrap:break-word;
            padding: 4px;
            line-height: 36px;
          }
        }
      }
      .situation{
        padding-top: 60px;
      }
      .contrast{
        width: 250px;
        height: 250px;
        margin: 80px auto 0 ;
        border-radius: 50%;
        p{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          span{
            font-size: 46px;
          }
        }
      }
    }
  }
  .share-content{
    height: 310px;
    padding: 30px 0 90px;
    position: relative;
    button{
      width: 677px;
      height: 96px;
      background: #ffff;
      border-radius: 48px;
      margin-top: 40px;
    }
  }
}
.soso{
  .report-top{
    background: url("../../assets/images/report/soso/soso-top-bg.png") no-repeat;
    background-size: cover;
    button.current{
      color: #42bd55;
    }
    .state-text{
      time{
        background: url("../../assets/images/report/soso/soso-time.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .statistics-content{
    .statistics-list{
      li{
        background: url("../../assets/images/report/soso/soso-state-item.png") no-repeat;
        background-size: 100% 100%;
        h6{
          background: url("../../assets/images/report/soso/soso-state-item-title.png") no-repeat center;
          background-size: 100% 100%;
        }
        .color-highlight{
          color: #42bd55;
        }
      }
      li:last-child::before{
        background: url("../../assets/images/report/soso/soso-state-item-last.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .statistics-list.empty-item-data{
      margin-bottom: 0;
      background: url("../../assets/images/report/soso/soso-item-empty.png") no-repeat ;
      height: 200px;
      background-size: 100% 100%;
    }
    .statistics-list.empty-item-data::before{
      position: absolute;
      left:50%;
      top: 0;
      content: '暂无数据';
      display: block;
      height: 140px;
      line-height: 140px;
      width: 90%;
      text-align: center;
      background: #eeeeee;
      margin-left: -45%;
      color: #b4b4b4;
    }
  }
  .learning-data{
    .learning-data-title{
      background: url("../../assets/images/report/soso/soso-learning-title.png") no-repeat center;
      background-size: 100% 100%;
    }
    .subject-num{
      background: url("../../assets/images/report/soso/soso-subject-num.png") no-repeat no-repeat center;
      background-size: 92% 100%;
      p{
        span{
          color: #42bd55;
        }
      }
    }
    .subject-num::before{
      content: '';
      display: block;
      position: absolute;
      left:50%;
      bottom:-40px;
      width: 90%;
      height: 4px;
      margin-left: -45%;
      border-bottom: 2px dashed  #ffef3a;
    }
    .learning-data-bg{
      background: url("../../assets/images/report/soso/soso-learning-data-bg.png") no-repeat center;
      background-size: 100% 100%;
      /*height: 2000px;*/
      .total-time-title{
        p{
          background-color: #ffe25d;
          color: #fc631f;
        }
        .total-empty-data{
          &::before{
            content: '暂无学习提醒数据哦...';
            color: #fff;
          }
        }
        .lectures-empty-data{
          &::before{
            content: '暂无听课数据哦...';
            color: #fff;
          }
        }
        .subject-empty-data{
          &::before{
            content: '暂无做题情况数据哦...';
            color: #fff;
          }
        }
      }
      .contrast{
        background: url("../../assets/images/report/soso/soso-round.png") no-repeat;
        background-size: cover;
        p{
          span{
            color: #42bd55;
          }
        }
      }
      .total-time{
        .total-time-table{
          .item-table-title{
            border: 1px solid #2c9f3d;
          }
          span{
            border-right: 1px solid #2c9f3d;
            &:last-child{
              border-right-width: 0;
            }
          }
         .user-subject-table{
           border: 1.5px solid #2c9f3d;
           td,th{
             border: 1.5px solid #2c9f3d;
           }
         }
        }
      }
    }
  }
  .share-content{
    background: url("../../assets/images/report/soso/soso-share-content.png") no-repeat;
    background-size: 100% 100%;
    button{
      background: url("../../assets/images/report/soso/soso-share-btn.png") no-repeat;
      background-size: 100% 100%;
      color: #42bd55;
    }
  }
}
.fine{
  .report-top{
    background: url("../../assets/images/report/fine/fine-top-bg.png") no-repeat;
    background-size: cover;
    button.current{
      color: #ff796c;
    }
    .state-text{
      time{
        background: url("../../assets/images/report/fine/fine-time.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .statistics-content{
    .statistics-list{
      li{
        background: url("../../assets/images/report/fine/fine-state-item.png") no-repeat;
        background-size: 100% 100%;
        h6{
          background: url("../../assets/images/report/fine/fine-state-item-title.png") no-repeat center;
          background-size: 100% 100%;
        }
        .color-highlight{
          color: #ff4e2a;
        }
      }
      li:last-child::before{
        background: url("../../assets/images/report/fine/fine-state-item-last.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .statistics-list.empty-item-data{
      margin-bottom: 0;
      background: url("../../assets/images/report/fine/fine-item-empty.png") no-repeat ;
      height: 200px;
      background-size: 100% 100%;
    }
    .statistics-list.empty-item-data::before{
      position: absolute;
      left:50%;
      top: 0;
      content: '暂无数据';
      display: block;
      height: 140px;
      line-height: 140px;
      width: 90%;
      text-align: center;
      background: #eeeeee;
      margin-left: -45%;
      color: #b4b4b4;
    }
  }
  .learning-data{
    .learning-data-title{
      background: url("../../assets/images/report/fine/fine-learning-title.png") no-repeat center;
      background-size: 100% 100%;
    }
    .subject-num{
      background: url("../../assets/images/report/fine/fine-subject-num.png") no-repeat no-repeat center;
      background-size: 92% 100%;
      p{
        span{
          color: #ff5629;
        }
      }
    }
    .subject-num::before{
      content: '';
      display: block;
      position: absolute;
      left:50%;
      bottom:-40px;
      width: 90%;
      height: 4px;
      margin-left: -45%;
      border-bottom: 2px dashed  #ffef3a;
    }
    .learning-data-bg{
      background: url("../../assets/images/report/fine/fine-learning-data-bg.png") no-repeat center;
      background-size: 100% 100%;
      .total-time-title{
        p{
          background-color: #ff5021;
          color: #fff;
        }
        .total-empty-data{
          &::before{
            content: '暂无学习提醒数据哦...';
            color: #fff;
          }
        }
      }
      .contrast{
        background: url("../../assets/images/report/fine/fine-round.png") no-repeat;
        background-size: cover;
        p{
          span{
            color: #ff5021;
          }
        }
      }
      .total-time{
        .total-time-table{
          .item-table-title{
            border: 1px solid #ffc8af;
          }
          span{
            border-right: 1px solid #ffc8af;
            &:last-child{
              border-right-width: 0;
            }
          }
          .user-subject-table{
            border: 1.5px solid #ffc8af;
            td,th{
              border: 1.5px solid #ffc8af;
            }
          }
        }
      }
    }
  }
  .share-content{
    background: url("../../assets/images/report/fine/fine-share-content.png") no-repeat;
    background-size: 100% 100%;
    button{
      background: url("../../assets/images/report/fine/fine-share-btn.png") no-repeat;
      background-size: 100% 100%;
      color: #ff6e1d;
    }
  }
}
.difference{
  .report-top{
    background: url("../../assets/images/report/difference/difference-top-bg.png") no-repeat;
    background-size: cover;
    button.current{
      color: #656a92;
    }
    .state-text{
      time{
        background: url("../../assets/images/report/difference/difference-time.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .statistics-content{
    .statistics-list{
      li{
        background: url("../../assets/images/report/difference/difference-state-item.png") no-repeat;
        background-size: 100% 100%;
        h6{
          background: url("../../assets/images/report/difference/difference-state-item-title.png") no-repeat center;
          background-size: 100% 100%;
        }
        .color-highlight{
          color: #42455d;
        }
      }
      li:last-child::before{
        background: url("../../assets/images/report/difference/difference-state-item-last.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .statistics-list.empty-item-data{
      margin-bottom: 0;
      background: url("../../assets/images/report/difference/difference-item-empty.png") no-repeat ;
      height: 200px;
      background-size: 100% 100%;
    }
    .statistics-list.empty-item-data::before{
      position: absolute;
      left:50%;
      top: 0;
      content: '暂无数据';
      display: block;
      height: 140px;
      line-height: 140px;
      width: 90%;
      text-align: center;
      background: #eeeeee;
      margin-left: -45%;
      color: #b4b4b4;
    }
  }
  .learning-data{
    .learning-data-title{
      background: url("../../assets/images/report/difference/difference-learning-title.png") no-repeat center;
      background-size: 100% 100%;
    }
    .subject-num{
      background: url("../../assets/images/report/difference/difference-subject-num.png") no-repeat no-repeat center;
      background-size: 92% 100%;
      p{
        span{
          color: #42455d;
        }
      }
    }
    .subject-num::before{
      content: '';
      display: block;
      position: absolute;
      left:50%;
      bottom:-40px;
      width: 90%;
      height: 4px;
      margin-left: -45%;
      border-bottom: 2px dashed  #ffef3a;
    }
    .learning-data-bg{
      background: url("../../assets/images/report/difference/difference-learning-data-bg.png") no-repeat center;
      background-size: 100% 100%;
      /*height: 2000px;*/
      .total-time-title{
        p{
          background-color: #5d628d;
          color: #fff;
        }
        .total-empty-data{
          &::before{
            content: '暂无学习提醒数据哦...';
            color: #fff;
          }
        }
        .lectures-empty-data{
          &::before{
            content: '暂无听课数据哦...';
            color: #fff;
          }
        }
        .subject-empty-data{
          &::before{
            content: '暂无做题情况数据哦...';
            color: #fff;
          }
        }
      }
      .contrast{
        background: url("../../assets/images/report/difference/difference-round.png") no-repeat;
        background-size: cover;
        p{
          span{
            color: #42bd55;
          }
        }
      }
      .total-time{
        .total-time-table{
          .item-table-title{
            border: 1px solid #c3c6df;
          }
          span{
            border-right: 1px solid #c3c6df;
            &:last-child{
              border-right-width: 0;
            }
          }
          .user-subject-table{
            border: 1.5px solid #c3c6df;
            td,th{
              border: 1.5px solid #c3c6df;
            }
          }
        }
      }
    }
  }
  .share-content{
    background: url("../../assets/images/report/difference/difference-share-content.png") no-repeat;
    background-size: 100% 100%;
    button{
      background: url("../../assets/images/report/difference/difference-share-btn.png") no-repeat;
      background-size: 100% 100%;
      color: #4d5590;
    }
  }
}
</style>
